<template>
    <div class=" content">
        <div class="left">
            <div class="chanpin-list">
                <div class="title">产品中心</div>
                <div class="chanpin-item">
                    <div class="item" v-for="(item, index) in allLeftData" :key="index"
                        @click="navigateData('/produc', '1', item.record_id)">
                        {{ item.title }}
                    </div>
                </div>
            </div>
            <div class="newslist-content">
                <div class="title">公司新闻</div>
                <div class="newslist-item">
                    <div class="item" v-for="(item, index) in newsListData" :key="index">
                        {{ item.title }}
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="title">产品展示</div>
            <div class="chanpinlist-content">
                <div class="top-content">
                    <div class="top-box">
                        <div class="left-box">
                            <img v-if="img" :src="base64Img(img)" alt="" srcset="">
                        </div>
                        <div class="right-box">
                            <h1 class="fi">{{ AllData.title }}</h1>
                            <h1>型号：{{ AllData.xinhao }}</h1>
                            <h3>全国服务热线 : {{ webXinxiData.tel1 }}</h3>
                            <h4>销售咨询电话 : {{ webXinxiData.tel2 }}</h4>
                        </div>
                    </div>
                    <div class="img-content">
                        <img :src="base64Img(item)" alt="" srcset="" v-for="(item, index) in AllData.img_name"
                            :key="index">
                    </div>
                </div>
                <div class="bottom">
                    <div class="title">一、产品特点</div>
                    <div class="item" v-html="AllData.productLittileText">
                    </div>
                    <div class="title">二、技术参数</div>
                    <div class="item">
                        <img v-if="AllData.img" :src="base64Img(AllData?.img)" alt="">
                    </div>
                    <div class="item" v-html="AllData.productMaxText">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue';
import router from '../router/index.js'; // 导入路由实例
import { base64Img } from '../tools/tools.js'
import { getquanbuchanpin, getLeftList, getWebXinxi, getSheBeiLeiBie, getNewsList, getChanPinXiangqing, } from '../api/api/ProducView.js'
import { useRoute } from 'vue-router'

const route = useRoute()

// 所有产品数据
const AllData = ref({})
// imgdata
const img = ref('')
const webXinxiData = ref({})

// 左侧栏信息
const allLeftData = ref([])
// 公司新闻
const newsListData = ref([])
// 传入保存 
const checkData = reactive({
    id: route.query.id
})

// 获取左侧列表
const _getLeftList = () => {
    getLeftList().then((res) => {
        console.log('左侧栏信息', res);
        allLeftData.value = res.data.data
    })
}
// 获取公司新闻
const _getNewsList = () => {
    getNewsList('sj1').then((res) => {
        console.log('新闻信息', res);
        newsListData.value = res.data.newslist
    })
}

// 根据id获取产品信息
const _getChanPinXiangqing = (id) => {
    getChanPinXiangqing(id).then((res) => {
        console.log('产品信息', res);
        AllData.value = res.data
        img.value = AllData.value.img_name[0]
    })
}
// 选择图片
const checkImg = (id) => {
    img.value = AllData.value.img_name[id]
}

// 详细信息
const _getXinxi = () => {
    getWebXinxi("sj1").then((res) => {
        webXinxiData.value = res.data.data
        console.log('网站信息', res);
    })
}

const navigateData = (path, checkId, id) => {
    // 发送查询参数
    router.push({
        path: path,
        query: { checkId: checkId, id: id }
    })
}

// 监听路由地址改变
onMounted(() => {
    _getLeftList()
    _getNewsList()
    _getXinxi()
    _getChanPinXiangqing(checkData.id)
});

</script>
<style lang="scss" scoped>
// 取消显示手机端 显示pc端
@media (min-width: 800px) {
    .content {
        padding-top: 20px;
        display: flex;
        justify-content: space-between;
        width: 1200px;
        margin: 0 auto;

        .left {
            margin: 20px 0;
            width: 200px;

            .chanpin-list {
                border: 1px solid #dedede;
                margin-bottom: 20px;

                .title {
                    padding: 10px 0 10px 20px;
                    background-color: #f7f7f7;
                    border-bottom: 1px solid #dedede;
                }

                .chanpin-item {
                    padding: 10px 0 10px 20px;
                    background-color: white;
                    line-height: 40px;
                    overflow: hidden;

                    .item {
                        cursor: pointer;
                    }

                    .item:hover {
                        color: orange;
                    }
                }
            }

            .newslist-content {
                border: 1px solid #dedede;
                margin-bottom: 20px;

                .title {
                    padding: 10px 0 10px 20px;
                    background-color: #f7f7f7;
                    border-bottom: 1px solid #dedede;

                }

                .newslist-item {
                    padding: 10px 0 10px 20px;
                    background-color: white;
                    white-space: nowrap;
                    width: 198px;

                    .item {
                    /* 不换行 */
                    overflow: hidden;
                    /* 溢出隐藏 */
                    text-overflow: ellipsis;
                    /* 用省略号表示溢出 */
                    line-height: 40px;
                    cursor: pointer;
                    }
                    .item:hover {
                        color: orange;
                    }
                }
            }
        }

        .right {
            margin-top: 20px;
            width: 980px;

            border: 1px solid #dedede;
            margin-bottom: 20px;

            .title {
                padding: 10px 0 10px 20px;
                background-color: #f7f7f7;
                border-bottom: 1px solid #dedede;
            }

            .chanpinlist-content {
                justify-content: center;
                background-color: white;

                .top-content {
                    padding: 20px;

                    .top-box {
                        display: flex;


                        .left-box {
                            margin-right: 20px;

                            img {
                                width: 400px;
                                height: auto;
                            }
                        }

                        .right-box {

                            font-size: 24px;

                            .fi {
                                font-size: 30px;
                                color: orange;
                                display: block;
                                width: 100%;
                                padding-bottom: 10px;
                                margin-bottom: 10px;
                                border-bottom: 1px solid gainsboro;
                            }
                        }
                    }

                    .img-content {
                        display: flex;
                        margin-bottom: 20px;
                        padding: 20px;

                        img {
                            margin-top: 20px;
                            width: 140px;
                            height: 140px;
                        }
                    }

                }

                .bottom {
                    .item {
                        padding: 0 20px;
                    }

                    img {
                        max-width: 900px;
                    }
                }
            }
        }
    }
}

// 取消显示pc端 显示手机端
@media screen and (max-width: 799px) {
    .left {
        display: none;
    }

    .title {
        line-height: 60px;
        font-size: 26px;
        font-weight: 700;
        text-align: center;
        border-bottom: 1px solid gainsboro;
        margin-bottom: 10px;
    }

    .right {
        .chanpinlist-content {
            padding: 20px;

            .top-content {

                .top-box {
                    .left-box {
                        display: flex;
                        justify-content: center;
                        margin-bottom: 10px;

                    }

                }
            }

            .img-content {
                margin-top: 20px;
                height: 100px;
                width: 100%;

                img {
                    width: 80px;
                }
            }

            .bottom {
                img {
                    width: 100%;
                }

            }
        }
    }

}
</style>